<template>
	<view class="container">
		<scroll-view scroll-y class="list" @scrolltolower="scrollBottom" style="height: 100%">
			<view class="content">
				<header-view></header-view>
				<view class="title">{{title}}</view>
				<view class="type_list flex" v-if="type==2">
					<view class="type_item flex_between" v-for="item in typeList" @tap="changeType(item.type)">
						<view class="item_info">
							<view class="item_icon flex_center" :style="{background:item.color}">
								<uni-icons custom-prefix="iconfont" :type="item.icon" color="#fff"
									size="14"></uni-icons>
							</view>
							<view class="item_title">{{item.title}}</view>
						</view>
						<uni-icons v-if="typeCurrent==item.type" custom-prefix="iconfont" type="icon-duigou"
							color="#0065ff" size="20" style="font-weight: 600;"></uni-icons>
					</view>
				</view>
				<view class="nav_list" v-if="type==2">
					<view class="nav_item flex" v-for="item in navList" @tap="changeNav(item.id)">
						<view class="item_icon flex_center" :style="{ background: item.bgc }">
							<uni-icons custom-prefix="iconfont" :type="item.icon" color="#fff" size="14"></uni-icons>
						</view>
						<view class="item_title">{{item.name}}</view>
						<uni-icons v-if="status == item.id" custom-prefix="iconfont" type="icon-duigou" color="#0065ff"
							size="20" style="font-weight: 600;"></uni-icons>
					</view>
				</view>
				<view class="nav_list" v-if="type==1">
					<view class="nav_item flex" v-for="item in navList" @tap="changeNavTow(item.statusTwo)">
						<view class="item_icon flex_center" :style="{background:item.color}">
							<uni-icons custom-prefix="iconfont" :type="item.icon" color="#fff" size="14"></uni-icons>
						</view>
						<view class="item_title">{{item.title}}</view>
						<uni-icons v-if="statusTwo == item.statusTwo" custom-prefix="iconfont" type="icon-duigou"
							color="#0065ff" size="20" style="font-weight: 600;"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y class="list">
					<view v-if="type==1">
						<view class="item flex_between" v-for="item in stockOrderList">
							<statusView type="3"></statusView>
							<view class="item_detail">
								<view class="item_title">{{item.pro_name}}</view>
								<view class="item_tips">{{item.order_sn}}</view>
							</view>
							<view class="item_number">
								<view class="item_amount" :class="item.money > 0?'up':'down'">{{item.money}}</view>
								<view class="item_tips">{{item.createtime}}</view>
							</view>
						</view>
					</view>
					<view v-if="type==2">
						<view class="item flex_between" v-for="item in rechargeList" v-if="typeCurrent == 1">
							<statusView :type="6"></statusView>
							<view class="item_detail">
								<view class="item_title">{{item.money}}</view>
								<view class="item_tips">{{item.time_str}}</view>
							</view>
							<text>{{item.status_str}}</text>
						</view>
						<view class="item flex_between" v-for="item in withdrawalList" v-if="typeCurrent == 2">
							<statusView :type="7"></statusView>
							<view class="item_detail">
								<view class="item_title">{{item.price}}</view>
								<view class="item_tips">{{item.time_str}}</view>
							</view>
							<text>{{item.status_str}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import statusView from "./components/status.vue"
	import {
		rechargeListApi,
		withdrawalListApi,
		getSelectTypeApi,
		stockOrderListApi
	} from '@/api/api.js'
	export default {
		components: {
			headerView,
			statusView
		},
		data() {
			return {
				timer: null,
				page: 1,
				type: '1',
				stockOrderList: [],
				rechargeList: [],
				withdrawalList: [],
				status: '-1',
				statusTwo: '2',
				type: 1,
				navList: [],
				current: 0,
				typeCurrent: 1,
				typeList: [{
					icon: "icon-xiazai",
					title: "充值",
					color: "#0065ff",
					type: '1'
				}, {
					icon: "icon-shangchuan",
					title: "提现",
					color: "#f05150",
					type: '2'
				}]
			}
		},
		onLoad(opt) {
			this.type = opt.type
			console.log(this.type)
			switch (this.type) {
				case "1":
					this.title = "交易记录"
					this.navList = [{
						icon: "icon-caidan",
						title: "平仓",
						color: "#00b578",
						statusTwo: '2'
					}, {
						icon: "icon-jianhao",
						title: "挂单",
						color: "#d7d7d7",
						statusTwo: '0'
					}, {
						icon: "icon-duigou",
						title: "开仓",
						color: "#0065ff",
						statusTwo: '1'
					}]
					this.getStockOrder()
					break;
				case "2":
					this.title = "充值提现记录"
					this.navList = []
					this.getStatus()
					this.getRechargeList();
					break;
			}
		},
		onShow() {
			if (this.type == 1) {
				this.timer = setInterval(() => {
					this.getStockOrder()
				}, 3000 * 10)
			}
		},
		onHide() {
			clearInterval(this.timer)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			getIcon(status) {
				// 根据不同的 status 返回对应的图标类型
				if (status === 0 || status === 1) {
					return 8; // 待审核的图标类型
				} else if (status === 2) {
					return 9; // 成功的图标类型
				} else {
					return 10; // 失败的图标类型，包括 status 为 3、4
				}
			},
			scrollBottom() {
				console.log("滚动到底部")
				this.page++
				console.log(this.page)
				if (this.type == 1) {
					this.getStockOrder()
				}
				if (this.type == 2 && this.typeCurrent == 1) {
					this.getRechargeList()
				}
				if (this.type == 2 && this.typeCurrent == 2) {
					this.getWithdrawalList()
				}
			},
			changeNav(index) {
				this.page = 1
				if (this.status == index) return
				this.status = index
				console.log(this.status)
				if (this.typeCurrent == 1) {
					this.getRechargeList()
				} else {
					this.getWithdrawalList()
				}
			},
			changeType(index) {
				this.page = 1
				this.status = '-1'
				if (this.typeCurrent == index) return
				this.typeCurrent = index
				if (this.typeCurrent == 1) {
					this.getStatus()
					this.getRechargeList()
				} else {
					this.getStatus()
					this.getWithdrawalList()
				}
			},
			changeNavTow(index) {
				this.page = 1
				if (this.statusTwo == index) return
				this.statusTwo = index
				console.log(this.statusTwo)
				this.getStockOrder()
			},
			// 获取充值列表状态
			getStatus() {
				const type = this.typeCurrent
				getSelectTypeApi({
					type,
				}).then(res => {
					if (this.typeCurrent == 1) {
						this.navList = res.data.data.map(item => {
							let bgc, icon;
							switch (item.id) {
								case -1:
									bgc = '#00b578';
									icon = 'icon-caidan'
									break;
								case 0:
								case 1:
									bgc = '#facc14';
									icon = 'icon-shizhong'
									break;
								case 2:
								case 3:
									bgc = '#f05150';
									icon = 'icon-cuowu'
									break;
								case 4:
									bgc = '#0065ff';
									icon = 'icon-duigou'
									break;
								default:
									bgc = ''; // 如果没有匹配到，返回空字符串或其他默认值
									icon = '';
							}
							return {
								...item,
								bgc,
								icon
							};
						});
					} else {
						this.navList = res.data.data.map(item => {
							let bgc, icon;
							switch (item.id) {
								case -1:
									bgc = '#00b578';
									icon = 'icon-caidan'
									break;
								case 0:
								case 1:
									bgc = '#facc14';
									icon = 'icon-shizhong'
									break;
								case 2:
									bgc = '#0065ff';
									icon = 'icon-duigou'
									break;
								case 3:
								case 4:
									bgc = '#f05150';
									icon = 'icon-cuowu'
									break;

								default:
									bgc = ''; // 如果没有匹配到，返回空字符串或其他默认值
									icon = '';
							}
							return {
								...item,
								bgc,
								icon
							};
						});
					}
				})
			},
			// 获取充值记录列表
			getRechargeList() {
				const token = uni.getStorageSync('token')
				// 获取充值提现状态
				const status = this.status
				const page = this.page
				rechargeListApi({
					token,
					status,
					page,
				}).then(res => {
					if (this.page == 1) {
						this.rechargeList = res.data.data.data
					} else {
						this.rechargeList = [...this.rechargeList, ...res.data.data.data]
					}
				})

			},
			// 获取提现记录列表
			getWithdrawalList() {
				const token = uni.getStorageSync('token')
				const status = this.status
				const page = this.page
				withdrawalListApi({
					token,
					status,
					page,
				}).then(res => {
					if (this.page == 1) {
						this.withdrawalList = res.data.data.data
					} else {
						this.withdrawalList = [...this.withdrawalList, ...res.data.data.data]
					}
				})
			},
			// 获取订单记录列表
			getStockOrder() {
				const token = uni.getStorageSync('token')
				const status = this.statusTwo
				const page = this.page
				stockOrderListApi({
					token,
					status,
					page,
				}).then(res => {
					if (this.page == 1) {
						this.stockOrderList = res.data.data.data
					} else {
						this.stockOrderList = [...this.stockOrderList, ...res.data.data.data]
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 40rpx;

		.title {
			padding-top: 60rpx;
			font-size: 30px;
			font-weight: 500;
			font-family: PM;
			line-height: 92rpx;
		}

		.type_list {
			border-bottom: 2rpx solid hsla(0, 0%, 92.9%, .46);
			column-gap: 30rpx;
			padding: 40rpx 0 50rpx;

			.type_item {
				flex: 1;
				margin: 8rpx 0;

				.item_title {
					flex: 1;
					font-size: 32rpx;
				}
			}
		}

		.nav_list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 30rpx;
			margin: 40rpx 0 50rpx;

			.nav_item {
				column-gap: 10rpx;
				margin: 8rpx 0;


				.item_title {
					flex: 1;
					font-size: 32rpx;
					margin-left: 10rpx;
				}
			}
		}

		.item_icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 8rpx;
		}

		.list {
			padding-top: 40rpx;
			border-top: 2rpx solid hsla(0, 0%, 92.9%, .46);

			.item {
				column-gap: 30rpx;
				margin-bottom: 30rpx;

				.item_tips {
					font-size: 24rpx;
					opacity: .4;
					font-family: PM;
					line-height: 34rpx;
				}

				.item_detail {
					flex: 1;

					.item_title {
						font-size: 36rpx;
						line-height: 54rpx;
						font-family: PM;
					}
				}

				.item_amount {
					text-align: end;
					font-family: PM;
					font-size: 36rpx;
					line-height: 54rpx;
				}
			}
		}
	}
</style>